<template>
  <div class="artiItem" @click="$router.push(`/article/${article.art_id}`)">
    <van-cell-group>
      <van-cell>
        <div slot="title" class="title van-multi-ellipsis--l2">
          {{ article.title }}
        </div>
        <div class="label" slot="label">
          <div class="imgbox" v-if="article.cover.images.length === 3">
            <div
              class="imgitem"
              :key="index"
              v-for="(item, index) in article.cover.images"
            >
              <van-image :src="item" fit="cover" />
            </div>
          </div>
          <div class="span">
            <span>{{ article.aut_name }}</span>
            <span>{{ article.comm_count }}评论</span>
            <span>{{ article.pubdate | relativeTime }}</span>
          </div>
        </div>
        <div
          class="rightImage"
          slot="default"
          v-if="article.cover.images.length === 1"
        >
          <van-image
            class="rightImg"
            fit="cover"
            :src="article.cover.images[0]"
          />
        </div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'artiItem',
  props: ['article'],
  data () {
    return {}
  },

  created () {},

  methods: {}
}
</script>

<style scoped lang="less">
.title {
  font-size: 32px;
  color: #3a3a3a;
}
.van-cell__value {
  flex: unset;
  width: 232px;
  height: 146px;
  padding-left: 25px;
}
.rightImage {
  width: 232px;
  height: 146px;
}
.rightImg {
  width: 232px;
  height: 146px;
}
.span span {
  font-size: 22px;
  color: #b4b4b4;
  margin-right: 25px;
}
/deep/ .imgbox {
  display: flex;
  width: 100%;
  height: 148px;
  margin: 10px 0 20px;
}
.van-cell__label {
  flex: unset;
  width: 100%;
}
.imgitem {
  flex: 1;
  height: 148px;
  overflow: hidden;
  margin-right: 8px;
  &:nth-child(3) {
    margin-right: 0;
  }
  img {
  }
  width: 100%;
  height: 100%;
}
</style>
